<template>
  <div class="official-document">
    <!-- 数据列表 -->
    <data-table ref="JDataTable"
                title="收藏"
                :total="total"
                :list="list"
                @change-page="changePage">
      <template slot="enclosure"
                slot-scope="{row}">
        <span v-if="row.enclosures.length<1">无附件</span>
        <template v-for="enclosure in row.enclosures">
          <div class="file-box"
               :key="enclosure.path"
               @click="downloadFile(enclosure)">
            <img :src="require('../images/file.png')" />
            <span class="file">{{enclosure.filename}}</span>
          </div>
        </template>
      </template>

      <template slot="action"
                slot-scope="{row}">
        <Button type="primary"
                size="small"
                @click="showDetail(row)">详情</Button>
        <Button type="success"
                size="small"
                @click="cancelCollect(row)">取消收藏</Button>
      </template>
    </data-table>

    <!-- 详情 -->
    <detail-modal title="发文"
                  ref="JDetailModal" />

    <!-- loading -->
    <Spin v-show="loading"
          size="large"
          fix />
  </div>
</template>

<script>
import storage from 'good-storage';
import DataTable from '../DataTable';
import { ajaxPost } from 'global/axios';
import { domain2 } from 'global/setting';
import { diyDownload } from 'common/js/util';
import DetailModal from '../DetailModal';

export default {
  components: {
    'data-table': DataTable,
    'detail-modal': DetailModal,
  },

  data() {
    return {
      total: 0,
      list: [],
      loading: false,
      params: {
        url: '/bus/srmsg/listcollect',
        token: storage.session.get('token'),
        data: {
          page: 1,
          pageSize: 10,
        },
      },
    };
  },

  methods: {
    search() {
      this.getData();
    },

    // 分页切换
    changePage(page) {
      this.params.data.page = page;
      this.getData();
    },

    // 获取数据
    getData() {
      this.loading = true;
      ajaxPost({
        ...this.params,
        success: res => {
          this.loading = false;
          if (res.data.code === '0000') {
            let { result, totalSize } = res.data.result;
            this.total = totalSize;
            this.list = result.map(item => item);
          }
        },
      });
    },

    showDetail(row) {
      this.$refs.JDetailModal.show(row);
    },

    // 切换收藏状态
    cancelCollect(row) {
      this.loading = true;
      let params = {
        data: {},
        url: '',
        token: storage.session.get('token'),
      };

      params.url = '/bus/srmsg/delcollect';
      params.data._id = row.collect_id;

      ajaxPost({
        ...params,
        success: res => {
          this.loading = false;
          let { code, message } = res.data;
          this.$Message[code === '0000' ? 'success' : 'error'](message);
          this.params.data.page = 1;
          code === '0000' && this.getData();
        },
      });
    },

    // 下载附件
    downloadFile(data) {
      diyDownload(`${domain2}${data.path}`, data.filename);
    },
  },
};
</script>

<style lang="less" scope>
.official-document {
  width: 100%;
}
</style>